<template>
  <!-- 提交订单 -->
  <div>
    <van-nav-bar fixed title="确认订单" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top has-bottom">
      <div>
        <div class="mlr-25">
          <div class="item" @click="openshowpeo">
            <div class="flex-s-s ptb-40 plr-25 ">
							<div>
								<svg-icon icon-class="yizi" class="fs-40 color-primary "/>
								<span class="color-dark ml15 fs-28">A03 | </span>
								<span class="color-dark fs-28">{{ peoNumber }}人</span>
							</div>
							<img class="css-rightimg" src="@/assets/images/meal/right.png" />
            </div>
          </div>
          <!--<div class=" item">
						<p class="fs-28 pb-25 pt-30">
							<span class="css-required">*</span>
							<span>订单必选项</span>
						</p>
						<div class="greyline1" />
						<indentList :items="indent" :type="type"></indentList>
          </div>-->
          <div class=" item">
						<p class="fs-28 pb-25 pt-30 ml">
							<span>点餐详情</span>
						</p>
						<div class="greyline1" />
						<mealDetailList :items="detaiList"></mealDetailList>
          </div>
          
					<div class="bg-white pos-r br-16 mt-22">
						<div class="ptb-20 plr-24 flex flex-v-c bb-l">
							<span class="fs-28 color-dark lh-48 ml-8">优惠信息</span>
						</div>
						<div class="bg-white pd-24 mg-24 br-16 travel fs-28" @click="openCouponList()">
							<div>优惠券</div>
							<div class="flex flex-v-c" v-if="userCouponList && userCouponList.length > 0">
								<div v-if="couponValue != 0">
									<span class="fs-28 color-primary1">-￥</span><span class="fs-36 color-primary1">{{ couponValue }}</span>
									<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goCoupon"/>
								</div>
								<div v-else>选择优惠券 <svg-icon icon-class="right" class="fs-24 ml-10" /></div>
							</div>
							<div v-else class="color-black2">暂无优惠券<svg-icon icon-class="right" class="fs-24 ml-10" /></div>						
						</div>
					</div>
					<div class="item pd-25">
            <p class="fs-28">备注</p>
            <van-field v-model="remark" type="textarea" class=" fs-28 mt-15" placeholder="请输入口味、偏好等要求" />
          </div>
					<van-popup  v-model="showCoupon" position="bottom">
						<div class="coupon-box">
							<h1 class="tac fs-32 fw-b mtb-15">优惠券</h1>
								<van-radio-group v-model="userCouponListRadio">
									<ul class="coupon-list mg-30 mb-0">
										<li
											v-for="(item, index) in userCouponList"
											:key="index"
											class="coupon-item mb-30 flex-s-c"
											@click="userCouponListRadio = index"
										>
											<div class="item flex-s-c flex-1 br-12" :style="{backgroundImage:'url('+require('@/assets/images/physio/coupon-li-bg.png')+')'}">
												<div class="left-box  fs-72   flex-center ">
													<div v-show="item.V_PrivilegeWay!==0" class="tac">
														<span>{{ parseInt(item.V_PrivilegeValue) }}</span>
														<span v-show="item.V_PrivilegeValue%1" class="fs-24">{{ item.V_PrivilegeValue ? item.V_PrivilegeValue.toFixed(2) : ''}}</span>
														<span class="fs-24">元</span>
														<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ? item.V_OrderPrice.toFixed(2) : '' }}元使用</p>
													</div>
													<div v-show="item.V_PrivilegeWay===0" class="tac">
														<span>{{ parseInt(item.V_PrivilegeValue/10) }}</span>
														<span v-show="(item.V_PrivilegeValue/10)%1" class="fs-24">.{{ item.V_PrivilegeValue/10 }}</span>
														<span class="fs-24">折</span>
														<p v-show="item.V_OrderPrice" class="fs-24 mt--20">满{{ item.V_OrderPrice ? item.V_OrderPrice.toFixed(2) : ''}}元使用</p>
													</div>
												</div>
												<div class="right-box flex-s-c flex-1 pl-30 pr-20 pos-r">
													<div>
														<p class="fs-32 color-dark lh text-show-line-1">{{ item.V_Name }}</p>
														<p v-show="!item.V_ProductCategoryIds&&!item.V_ProductIds&&!item.V_StoreIds" class="fs-24 color-gray-light">全场通用</p>
														<p v-show="item.V_ProductCategoryIds||item.V_ProductIds||item.V_StoreIds" class="fs-24 color-gray-light">{{ item.StoreNames }}{{ item.StoreNames?',':'' }}{{ item.ProductNames||item.ProductCategoryNames }}</p>
														<p
															class="fs-24 color-gray-light"
														>{{ item.V_UseStartTime }}至{{ item.V_UseEndTime }}</p>
													</div>
													<van-radio checked-color="#24c373"  :name="index" class="pr-20 flex-s-0" />
												</div>
											</div>
										</li>
									</ul>
								</van-radio-group>
								
							<div class="pd-24 flex-center">
								<van-button	class="color-primary1 bg-white flex-1 br-44 mr-20"	native-type="submit"	@click="noUseCoupon">不使用优惠券</van-button>
								<van-button		class="solid-btn flex-2 br-44 ml-20"	native-type="submit"	@click="choseCoupon">确定</van-button>
							</div>
						</div>
					</van-popup>
        </div>
      </div>
    </div>
		<!-- 底部确认订单 -->
		<div class="fixed-bottom">
				<div class="flex flex-s-c ptb-20 plr-25 bg-white bottom-box">
					<div class="flex">
						<span class="fs-24 color-dark mt-18">合计</span>
						<span class="color-primary fs-40 fw-600 mt-5">￥{{totalprice ? totalprice.toFixed(2) : ''}}</span>
					</div>
					<div class="flex">
						<button class="bg-tp bd-solid btn fs-28 lh-72 br-36 mr-15" @click.stop="order">继续点菜</button>
						<button class="bg-primary color-white btn fs-28 lh-72 br-36" @click.stop="submitOrder">确认下单</button>
					</div>
				</div>
		</div>
		<!-- 选择人数弹窗 -->
    <van-popup v-model="showPeoNum" :close-on-click-overlay="false" round >
			 <div class="css-peomain">
					<div class="css-peotitle">请选择人数</div>
					<div class="css-peoall">
						<div class="main-div" :style="getStyle(item)" v-for="(item,index) in peoCountlist" @click="activeBtn(item)">
								{{item.num}}
						</div>
					</div>
					<div class="css-startbtn">
						<button class="btn-large color-white bg-primary" @click="gostart()">确认</button>
					</div>
			 </div>
    </van-popup>
  </div>
</template>

<script>
import imgBox from 'components/imgBox'
import indentList from 'components/indentList'
import mealDetailList from 'components/mealDetailList'
import shopCart from 'components/purchase/shopCart'
import { GetPurchaseCarDetailPage, AddPurchaseOrder } from 'api/purchase'
import { GetUserCarList } from 'api/product'
export default {
  components: { imgBox, indentList,mealDetailList, shopCart },
  data() {
    return {
			type:'confirm',
			showPeoNum:false,
			peoCountlist:[
				{
					num:1,
					isActive:false
				},
				{
					num:2,
					isActive:false
				},
				{
					num:3,
					isActive:false
				},
				{
					num:4,
					isActive:false
				},
				{
					num:5,
					isActive:false
				},
				{
					num:6,
					isActive:false
				},
				{
					num:7,
					isActive:false
				},
				{
					num:8,
					isActive:false
				},
				{
					num:9,
					isActive:false
				},
				{
					num:10,
					isActive:false
				},
				{
					num:11,
					isActive:false
				},
				{
					num:12,
					isActive:false
				},
				{
					num:13,
					isActive:false
				},
				{
					num:14,
					isActive:false
				},
				{
					num:15,
					isActive:false
				},
				{
					num:16,
					isActive:false
				},
			],
			indent:[
				{
					id:1,
					picUrl:'https://img1.baidu.com/it/u=3756021882,3696420344&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
					unit:'位',
					name:'自助餐费',
					price:5,
					amount:3,
				},
				{
					id:1,
					picUrl:'https://img2.baidu.com/it/u=108457981,2972760881&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=406',
					unit:'份',
					name:'米饭',
					price:3,
					amount:4,
				},
			], // 必选订单
			detaiList:[
				{
					id:1,
					picUrl:'https://img2.baidu.com/it/u=890587804,598493492&fm=253&fmt=auto&app=120&f=JPEG?w=1067&h=800',
					unit:'促',
					spec:'新用户促销活动',
					name:'牛排',
					price:5,
					amount:3,
				},
				{
					id:1,
					picUrl:'https://img2.baidu.com/it/u=3997425170,794536927&fm=253&fmt=auto&app=138&f=JPEG?w=584&h=500',
					unit:'减',
					spec:'满300减100',
					name:'意面',
					price:5,
					amount:3,
				},
			],
			remark:'',			
			peoNumber: 0,
			showCoupon: false, // 优惠券弹出层
			userCouponList: [], // 未使用			
			userCouponListRadio: 0,
			changeListRadio: 0,
			userCouponNum: 0, // 可使用优惠券的数量
			couponValue: 0,

    }
  },
  computed: {
		total(){
			let _total = 0
			if(this.detaiList.length > 0){
				this.detaiList.forEach(ele => {
					_total +=  ele.V_GradePrice * ele.Amount
				});
			}
			return _total	
		},
	
		totalprice(){
			let _totalPay =  this.total - this.couponValue
			return _totalPay
		},
	},
  created() {
    //console.log(typeof (this.$route.params.ids))
    //let ids = this.$route.params.ids
    //ids = ids.substring(0, ids.length - 1)
    //this.requsetData.carIds = ids
    //this.GetPurchaseCarDetailPage(ids)
		if(this.$route.query.peoNumber){			
			this.peoNumber = parseInt(this.$route.query.peoNumber) 
		}
		this.peoCountlist.forEach((ele) => {
			if(ele.num === this.peoNumber){
				ele.isActive = true
			}
		})
		this.GetUserCarList()
  },

  methods: {
		openshowpeo(){
			this.showPeoNum = true
		},
		//确认修改人数
		gostart(){
			this.showPeoNum = false
		},
		getStyle(item){
				if(item.isActive){
						return {'background-color':'#2cd334','color':'#fff'}
				}
				return {}
		},
		activeBtn(item){

			this.peoNumber = item.num
				let currentState = item.isActive;
						this.peoCountlist.forEach(el=>{
						el.isActive= false
				})
				item.isActive = !currentState
		},
		//继续点菜
		order(){
			this.$router.push({
				path:'orderMeal/' + localStorage.getItem('storeId'),
				query:{
					peoNumber: this.peoNumber
				}
				
			})
		},
		submitOrder(){
			this.$router.push('/placeOrder')
		},
    //AddPurchaseOrder() {
    //  AddPurchaseOrder(this.requsetData).then(res => {
    //    if (res && res.Data) {
    //      this.$router.push('/purchase/success/' + res.Data)
    //    }
    //  })
    //}
		// 获取购物车列表
    GetUserCarList() {
      GetUserCarList({ priceType: 1, storeId: localStorage.getItem('storeId'), IsRetail: 1, isFilterStore: 1 }).then((res) => {
        if (res) {
          this.detaiList = res.Data
					console.log(res.Data,"购物车")
        }
      })
    },
		// 选择优惠券
		openCouponList() {
				this.showCoupon = true
				this.focusStatus = false
				if (this.price === '') {
					Toast({
						message: '请先输入订单金额'
					})
					this.focusStatus = true
					return
				} 
			},
			goCoupon(){
				this.showCoupon = true
			},
			
			// 不使用优惠券
			noUseCoupon() {
				this.userCouponListRadio = 0
				this.minOrderPrice = 0
				this.changeListRadio = 0
				this.V_PrivilegeValue = 0
				this.couponValue = 0
				this.param.CouponDetailId = 0
				this.param.CouponId = 0
				this.showCoupon = false
			},
			// 确定选择优惠券
			choseCoupon() {
				this.showCoupon = false
				const list = this.active ? this.changeList : this.userCouponList
				const radio = this.active ? this.changeListRadio : this.userCouponListRadio
				if (radio >= 0) {
					console.log(radio)
					if (list[radio].V_PrivilegeWay === 0) {
						this.V_PrivilegeValue = ((1 - list[radio].V_PrivilegeValue / 100) * this.price).toFixed(2)
					} else {
						this.V_PrivilegeValue = list[radio].V_PrivilegeValue
					}

					this.couponValue = this.V_PrivilegeValue
					this.minOrderPrice = list[radio].V_OrderPrice || 0
					this.param.CouponDetailId = list[radio].DetailId
					this.param.CouponId = list[radio].ID
				}
			},
  }

}
</script>
<style lang="scss" scoped>
.checkbox{
 padding-left: 75px;
 &:before{
   top: 3px;
   left: 23px;
 }
 &:after{
   top: 6px;
   left: 35px;
 }
}
.left-checkbox{
  width: 120px;
  height: 32px;
   &:before{
     top: 0;
   left: 44px;
 }
 &:after{
   left: 56px;
   top: 4px;
 }
}
.item{
  background: $colorF;
  border-radius: 12px;
  margin-top: 20px;
  .list-bg{
     background: url("") #fff repeat-x center bottom;
    background-size: 30px auto;
  }
  .spec-item{
    padding: 10px 20px;
    background: $colorF7;
    border-radius: 6px;
    margin-top: 12px;
  }
  .checkbox{
    padding-left:0;
    &:before{
      right:0;
      top: 20px;
      left:auto;
    }
     &:after{
      right:12px;
      top: 24px;
      left:auto;
    }
  }
  .arrow:after{
    color:$colorC;
    right: 25px;
    top: 40px;
  }
  .arrow-box{
    width: 20px;
    height: 20px;
    margin-left: 40;
    flex-shrink: 0;
    &:after{
      top: 0;
      right: 0;
    }
  }
  .van-cell{
    background: $colorF7;
    border-radius: 6px;
    padding: 10px 6px;
    line-height: 1.5;
  }
}
.css-rightimg{
	width: 32px;
	height: 32px;
	margin-top: 5px;
}
.css-required{
	color: $red;
	margin-left: 30px;
	margin-right: 15px;
}
.bottom-box {
		position: relative;
		background: $colorF;
		height: 120px;
		z-index: 2;
		box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
}

.btn {
		width: 200px;
		padding: 0;
		line-height: 62px;
		border-radius: 36px;
		text-align: center;
}
.css-peomain{
	width: 604px;
	height: atuo;
	background: #fff;
	padding: 30px 0 30px 30px;
}
.css-peotitle{
 font-size: 34px;
 text-align: center;
}
.css-peoall{
	display: flex;
	flex-wrap: wrap;
	margin-top: 40px;
}
.main-div{
    width: 116px;
		height: 64px;
		line-height: 64px;
		background: #F4F5F6;
		border-radius: 8px;
		text-align: center;
		color: $color3;
		font-size: $fontSize;
		margin-right: 25px;
		margin-bottom: 24px;
}
.css-startbtn{
	margin-top: 60px;
	margin-bottom: 20px;
	margin-right: 30px !important;
}
.travel{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* 优惠券列表 */
.coupon-list {
	position: relative;
	max-height: 55vh;
	overflow: scroll;
	.coupon-item {
		.item {
			width: 686px;
			height: 180px;
			background-size: 100% 100%;
			.left-box {
				width: 210px;
				height: 100%;
				color:#FDE8AE;
			}
		}
	}
}
</style>
